<template lang="html">
<div class="page">
  <cube-scroll ref="scroll" :data="List" :options="opts" @pulling-down="onPullingDown">
    <div class="title-bar">
      <h2>{{obj.Title}}</h2>
      <p>{{obj.Summary}}</p>
    </div>
    <div class="flex bg-white line-top p-md">
      <avatar :src="obj.Avatar" class="mr"></avatar>
      <div class="f-body">
        <div class="fs-sm tc-grey">{{obj.NickName}}</div>
        <p class="desc">财务部</p>
      </div>
    </div>
    <tit>分发信息</tit>
    <div class="msg-boxs">
      <router-link :to="'/home/blxq/' + idx" class="mbox flex v-top" v-for="(i,idx) in List" :key="idx + Math.random()">
        <avatar :src="i.Avatar" class="mr-md"></avatar>
        <div class="f-body">
          <h2 class="title">{{ i.NickName }}</h2>
          <p class="desc">{{ i.NickName }}</p>
          <div class="text-block mt-sm">
            {{ i.Summary }}
          </div>
        </div>
        <div class="right-top btn-tag " :class="idx % 2 ? 'bg-green':'bg-orange'">
          {{ idx % 2 ? '已处理':'未处理' }}
        </div>
      </router-link>
    </div>

  </cube-scroll>

</div>
</template>

<script>
export default {

  data() {
    return {
      List: [],
      obj:{},
      opts:{
        scrollbar:{
          fade: true
        },
        pullDownRefresh: {
          threshold: 90,
          stop: 40,
          txt: '刷新成功'
        }
      }
    }
  },
  created () {
    this.getListData()
  },
  methods : {
    getListData() {
      this.id = this.$route.params.id
      this.axios.get('https://jason588.github.io/data.json').then((res) => {
        this.List = res.data.List
        this.obj = res.data.List[this.id]
      })
    },
    onPullingDown() {
      // 模拟更新数据
      setTimeout(() => {
        if (Math.random() > 0.5) {
          this.$createToast({
            time: 1000,
            txt: '正在加载新数据'
          }).show()
        } else {
          // 如果没有新数据
          this.$refs.scroll.forceUpdate()
        }
      }, 1000)
    }

  },
}
</script>

<style lang="stylus">
@import "assets/stylus/base"
.msg-boxs
  // background: #fff
  padding:0 $spacing $spacing
  .mbox
    padding: 10px;
    background-color: #fff;
    border-radius: 3px
    position: relative;
    + .mbox
      margin-top: 15px
</style>
